<template>
  <div class="menu-logo">
    <el-icon color="#ffffff" :size="20" @click="changeCollapse"><Expand /></el-icon>
    <img src="../assets/menu-logo.png" v-if="!collapse">
  </div>
  <el-menu
      mode="vertical"
      :collapse="collapse"
      @select="menuSelect"
      router
      :default-active="activeRouter"
      class="el-menu-vertical-demo"
      background-color="rgb(52, 55, 68)"
      text-color="#ffffff"
      active-text-color="#ffc200"
      style="height: calc(100% - 20%)"
  >
    <el-menu-item  v-for="(item,index) in menuList" :index="item.path" :key="index">
      <el-icon>
        <User v-if="item.icon === 'User'" />
        <Grid v-else-if="item.icon === 'Grid'" />
        <Dish v-else-if="item.icon === 'Dish'" />
        <Present v-else-if="item.icon === 'Present'" />
        <Tickets v-else />
      </el-icon>
      <template #title>{{ item.label }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import {computed, ref} from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Grid,
  Dish,
  Present,
  Tickets,
  Expand
} from '@element-plus/icons-vue'
const menuList = ref([
  {
    label: '员工管理',
    path: 'userManagement',
    icon: 'User'
  },
  {
    label: '分类管理',
    path: 'categoryManagment',
    icon: 'Grid',
  },
  {
    label: '菜品管理',
    path: 'foodManagment',
    icon: 'Dish',
  },
  {
    label: '套菜管理',
    path: 'packageManagment',
    icon: 'Present',
  },
  {
    label: '订单明细',
    path: 'orderDeatil',
    icon: 'Tickets',
  }
])
const router = useRouter()
function menuSelect (menu) {
  router.replace({ name: menu })
}
const activeRouter = computed(() => router.currentRoute.value.name)
let collapse = ref(true)
function changeCollapse () {
  collapse.value = !collapse.value
}
</script>

<style scoped lang="css">
.menu-logo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 20%;
  width: 100%;
  background-color: rgb(52, 55, 68);
}
img {
  height: 32px;
  width: 117px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 80%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
:deep(.el-menu-item) {
  width: 100% !important;
}
</style>
